<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Path</title>
</head>
<body>
  <canvas id="mycanvas" width="1200" height="600"></canvas>
  <script src="/js/sprite-core.js"></script>
  <script>
    const Path = spritejs.Path;
    const Layer = spritejs.Layer;
    const context = document.getElementById('mycanvas').getContext('2d');
    const layer = new Layer({context});

    const paths = [
      'M553.392524758255,224.99702511522491L553.4895231700979,226.9089738545989L554.550554740908,228.46011777804097L555.4819128572756,229.82544219700094L557.3708312282943,231.34982353725502L559.6666970252712,234.1951509478115L561.0038924392323,234.90733614174974L563.5077132980811,236.7025622469764L564.256516888014,238.04558310913353L565.3694559470711,243.4588890294748L567.1219916584139,244.5229343039332L568.4004705732171,242.6572092169015L570.9802203752224,243.33298424545546L573.368010520412,244.53758758777713L573.3858901726915,245.41123964459143L572.7271036008572,246.077009869986L572.6393468597522,248.19824341522315L571.6891347227681,250.68957884333292L571.5698126077335,250.8672742147195L570.6283252190949,253.489085067514L570.5240687523803,256.47257584076L572.2169779079868,258.2910464110047L572.9243607041647,258.99599330057583L576.1234817163706,261.1589784377892L577.0912407141467,262.76414921449873L578.4240454517648,262.1038286635909L581.02424115802,263.86573046075523L581.1743424700904,264.6973469801111L583.5407452772458,265.9193084928306L583.5448177513374,268.06137977835203L583.5524758430722,268.17355772545545L585.2135915377693,271.2139738621205L584.3962050300986,272.4735439011671L584.4417439198236,274.06241687178203L586.3435504066613,277.9372298093024L587.3176174833466,278.41721406814634L588.0650258700882,277.3428476616531L590.0122738989003,278.78429161751865L590.5558893829831,279.45977195493356L590.44871442631,282.45812985425334L589.3994917440666,283.81011052018107L589.8266073176247,285.0009198291068L588.8664330363283,286.7418049957191L587.6279717640257,285.5512087956977L586.456546298794,288.14353117324913L585.4729111169704,288.23272769002756L584.6631468700132,288.2830159204939L584.7790459609988,291.3241257619218L583.8091083224288,291.8880721602443L585.0444537300096,292.85889111032475L582.6532262816687,293.0552948935997L583.7214042899176,294.25651683507454L584.328874144988,295.29740030357993L583.1096324026419,296.20111147159355L582.7951576008618,297.7856335164756L579.0292529868522,298.082072174775L574.1038741994514,298.437679538187L572.7798740297983,298.5309107764151L575.342850126691,294.4927905952022L577.1058697554026,292.46327604096643L576.762107413873,290.6483565246293L575.5286956782373,288.8792510553534L574.5485432683251,288.94129382094127L569.2727765762269,289.23939801602035L566.1819194223247,289.413592315385L561.1032043461752,289.6986182287595L556.9349797642193,289.9185370467965L556.3000037470439,289.9379502076798L552.9927435479163,290.0580560325311L546.3382692579037,290.35670259747417L545.8904951788244,290.3799873922678L540.2635952030248,290.5967915232209L536.6476261743328,290.74250543134247L535.4365415255501,290.7790750768952L528.8582390869959,290.9744808572756L528.5808555967568,290.9843720051705L524.5787751743613,291.0776001185143L520.3794379097479,291.18114860017533L517.2523709308686,291.247882641532L509.20978159398487,291.3745544457987L509.1636064720574,288.1990367353352L509.13123883961316,286.3388703911585L509.07285300582777,281.9578135989743L509.0622751447035,280.86598921527525L508.98505610322684,275.5569235755984L508.9779850799681,275.0707672351132L508.8986110281266,269.6135374734514L508.89326335215316,269.2458669841552L508.84571328596,262.381865161449L508.8393916089274,261.94835468048973L508.7646205044803,255.75042144292604L508.74017238175156,254.0751874928634L508.72543814975427,249.1622503601552L508.71084347306027,247.10510608758875L508.6667771750641,243.3923409544492L508.64761877955823,242.0849836405498L508.7172310012315,241.2139088551944L506.22656285935375,240.50689432066758L504.41416113318513,238.62908208927945L504.69010956936,237.19282484632743L503.39306949899935,236.39328816587215L501.4594756687486,234.25491880614504L502.1288074181232,232.54826836566951L503.51520682540115,230.23424633493062L504.54055159248975,230.57596888408762L504.6268969443901,228.80608117626923L502.9486597214252,227.36795688005782L501.6559226429782,228.06036907997304L498.46611348732966,225.48347173441243L496.86198079622443,224.43126986943662L497.19441251911934,223.13654105577962L494.98296285646194,220.56971406780065L494.9472203570501,220.5152268791727L494.1171317859797,219.58670641980348L492.7423825018025,215.64377449057406L491.9566392212373,214.4893534111261L497.46295255275413,214.5524603026089L499.8756204438025,214.57284256582443L503.9188232342913,214.59654649788445L507.8967485340601,214.61503422408373L510.15794600668664,214.59069397568067L513.5187497668454,214.51216440349583L516.5660640069719,214.41455584046207L519.9554455424772,214.2706467566021L523.0117642543828,214.14495201763066L525.5746260666759,214.07456985645263L529.4670835580589,213.89249791193163L534.8454604641856,213.61508895806696L535.9187251088101,213.55121472454414L539.9482414933167,213.28101336729628L542.3456589449022,213.1249891961544L545.6685742276857,212.88796453487578L548.8501205519233,212.88602679319865L553.2282662554521,216.83518992293932L552.2467831887652,219.3250424356038L552.1733059162248,220.23946465601307L552.470972001338,223.30192252769336Z',
    ];
    const path = new Path();
    path.attr({
      states: {
        a: {
          scale: [0.5, 0.5],
        },
        b: {
          scale: [1.0, 1.0],
        },
      },
      actions: [
        // {
        //   from: 'a',
        //   to: 'b',
        //   action: {
        //     duration: 2000,
        //     easing: 'ease-in-out',
        //   },
        // },
        {
          both: ['a'],
          action: {
            duration: 500,
            easing: 'ease-in-out',
          },
        },
        {
          both: ['a', 'b'],
          action: {
            duration: 2000,
            easing: 'ease-in-out',
            // reversable: true, // default is true
          },
        },
      ],
      path: {d: paths[0], transform: {rotate: 180}, trim: true},
      anchor: [0, 0],
      // size: [1000, 1000],
      pos: [300, 300],
      strokeColor: 'blue',
      bgcolor: '#aaa',
      lineWidth: 1,
      lineDash: [5, 5],
      bounding: 'path',
      gradients: {
        fillColor: {
          vector: [0, 0, 100, 0],
          colors: [
            {offset: 0, color: 'red'},
            {offset: 0.5, color: 'yellow'},
            {offset: 1, color: 'blue'},
          ],
        },
      },
    });
    console.log(path.renderRect);
    path.on('touchstart', (evt) => {
      console.log(evt.targetPaths, evt.targetTouches);
    });
    path.on('touchend', (evt) => {
      console.log(evt.targetPaths, evt);
    });
    path.on('mouseenter', (evt) => {
      console.log('mouseenter');
    });
    path.on('mouseleave', (evt) => {
      console.log('mouseleave');
    });
    path.on('mouseup', (evt) => {
      console.log('mouseup');
      path.releaseMouseCapture();
    });
    path.on('mousemove', (evt) => {
      console.log('mousemove');
    });
    path.on('mousedown', (evt) => {
      console.log('mousedown');
      path.setMouseCapture();
    });

    path.animate([
      {lineDashOffset: 10},
    ], {
      duration: 1000,
      iterations: Infinity,
    });

    path.on('state-to-a', (evt) => {
      console.log(evt.type);
    });
    path.on('state-from-a', (evt) => {
      console.log(evt.type);
    });
    path.on('state-from-b', (evt) => {
      console.log(evt.type);
    });
    path.on('state-to-b', (evt) => {
      console.log(evt.type);
    });

    setTimeout(() => {
      path.attr('state', 'a');
    }, 1000);

    setTimeout(() => {
      path.attr('state', 'b');
    }, 3500);

    setTimeout(() => {
      path.attr('state', 'a');
    }, 7000);

    setTimeout(() => {
      path.attr('state', 'b');
    }, 9000);

    setTimeout(() => {
      path.attr('state', 'a');
    }, 9500);

    setTimeout(() => {
      path.attr('state', 'b');
    }, 10000);

    // path.animate([
    //   {d: paths[0]},
    //   {d: paths[0]},
    //   {d: paths[1]},
    //   {d: paths[1]},
    //   { d: paths[2]},
    //   {d: paths[2]},
    //   {d: paths[3]},
    //   {d: paths[3]},
    //   {d: paths[4]},
    //   {d: paths[4]},
    // ], {
    //   delay: 1000,
    //   duration: 10000,
    //   fill: 'forwards',
    //   iterations: Infinity,
    //   direction: 'alternate'
    // })
    layer.appendChild(path);

    mycanvas.addEventListener('click', (evt) => {
      const {offsetX, offsetY} = evt;
      layer.dispatchEvent('click', {layerX: offsetX, layerY: offsetY, originalEvent: evt});
    });
    mycanvas.addEventListener('touchstart', (evt) => {
      const {clientX, clientY} = evt.changedTouches[0];
      layer.dispatchEvent('touchstart', {layerX: clientX, layerY: clientY, originalEvent: evt});
    });
    mycanvas.addEventListener('touchend', (evt) => {
      const {clientX, clientY} = evt.changedTouches[0];
      layer.dispatchEvent('touchend', {layerX: clientX, layerY: clientY, originalEvent: evt});
    });
    mycanvas.addEventListener('mouseup', (evt) => {
      const {offsetX, offsetY} = evt;
      layer.dispatchEvent('mouseup', {layerX: offsetX, layerY: offsetY, originalEvent: evt});
    });
    mycanvas.addEventListener('mousemove', (evt) => {
      const {offsetX, offsetY} = evt;
      layer.dispatchEvent('mousemove', {layerX: offsetX, layerY: offsetY, originalEvent: evt});
    });
    mycanvas.addEventListener('mousedown', (evt) => {
      const {offsetX, offsetY} = evt;
      layer.dispatchEvent('mousedown', {layerX: offsetX, layerY: offsetY, originalEvent: evt});
    });
  </script>
</body>
</html>